<script setup lang="ts">
import {ref, watch} from 'vue'
// components
import SubMenu from './SubMenu.vue';
// utils
import { routes as menuList } from '@/router/index';

const selectedKeys = ref<string[]>([]);
const openKeys = ref([]);

console.log(`openKeys`, openKeys.value);

watch(
      () => openKeys,
      val => {
        console.log('openKeys', val);
      },
    );

</script>

<template>
  <a-menu 
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys" 
       class="menu-wrapper"
        mode="inline">
    <SubMenu  
      v-for="item of menuList" 
      :key="item.id"
      :menuItem="item"
    />
  </a-menu>
</template>

<style scoped>
.menu-wrapper {
  width: 300px;
  height: 100%;
}
</style>
